<template>
  <div class="hello">
    <navbar></navbar>
    <lunbo></lunbo>
    <div class="contents ">
      <div class="details">
        <div class="content-l">
          <div class="hot">
            <div>
              <img src="../assets/img/Path 7.png" height="15px" width="5px" alt="">
              <h4>热门标签</h4>
            </div>
            <div class="hot-one">
              <div v-bind:class="{ tagsHidden: isActive}">
                <a v-for="item in tags" v-on:click="getNewsList(item.code,'')" style="cursor:pointer"
                   v-bind:class="{ 'active':ide == item.code }">{{item.name}}</a>
              </div>
              <div class="hot-v" v-on:click="dorpDown" v-show="show">
                <img src="../assets/img/Group 22.png" alt="">
              </div>
              <div class="hot-m" v-show="ishow" v-on:click="packUp">
                <img src="../assets/img/sh.png" alt="">
              </div>
            </div>
          </div>
          <div class="details-list">
            <ul>
              <li v-for="(item,index) in news" :id="'new'+item.id" class="lis">
                <router-link v-bind="{to:'/detailst/'+ item.id}">
                  <div>
                    <h5>{{item.newsTitle}}</h5>
                  </div>
                  <span>{{item.infopubldate}}</span>
                  <p> {{item.newsAbstract}}</p>
                </router-link>
                <div class="lists">
                  <div>
                    <img src="../assets/img/1.png" height="20px" alt="">
                    <a v-for="tag in item.tagList" style="cursor:pointer"
                       v-on:click="getNewsList(tag.code,'')" class="a">{{tag.name}}
                    </a>
                  </div>
                  <div class="lists-r">
                    <a href="javascript:;" @click="isPraise(item)">
                      <img v-bind:src="item.src==null?src:item.src" :id="'like'+item.id" width="12px">
                      <span>{{item.likes}}</span>
                    </a>
                    <span>|</span>

                    <a href="javascript:;" @click='issForward(item)'>
                      <img src="../assets/img/fx.png" :id="'forward'+item.id" width="12px">
                      <span>{{item.shares}}</span>
                    </a>
                    <span>|</span>
                    <a href="javascript:;" @click="getComments(item)">
                      <img src="../assets/img/pl.png" :id="'comment'+item.id" width="12px">
                      <span>{{item.comments}}</span>
                    </a>
                  </div>
                </div>
                <div v-show='num==item.id'>
                  <div class="main">
                    <textarea id="tex" cols="60" rows="3" maxlength="100" class="texs" v-model="asss"></textarea>
                    <br>
                    <input type="button" v-on:click="uploadComment(item)" value="发表评论" id="ipt">
                    <div class="uscomments">
                      <div class="uscomments1" v-for="(ite,index) in commentslist">
                        <div class="personal-img">
                          <img src=""/>
                        </div>
                        <div class="uscomments-one">
					 	           <span class="usname">
					 		              {{ite.businessData.nickName}}
					 	          </span>
                          <div>
                            <a href="javascript:;">
                              <img src="../assets/img/love1.png" width="15px"/>
                              <span id="u888">{{ite.businessData.likes}}</span>
                            </a>
                            <a href="javascript:;" @click='cldComment(index)'>回复</a>
                            <a href="javascript:;">举报</a>
                          </div>
                        </div>
                        <p>{{ite.businessData.contentStr}}</p>
                        <div v-show="asf==index" class="rep">
                          <span>啦啦啦：程序猿</span>
                          <a href="javascript:;">删除评论</a>
                        </div>
                        <div class="deletecomm" v-show=false>
                          <div>
                            <h2>提示</h2>
                            <img src=""/>
                          </div>
                          <div>
                        	  	<span>
                        	  		确定删除改评论？
                        	  	</span>
                          </div>
                          <div id="o99">
                            <el-button size="small" round>取消</el-button>
                            <el-button size="small" round>确定</el-button>
                          </div>
                        </div>
                        <div class="replylis" v-show="asd==index">
                          <input type="" value="" v-model="repcomments" :placeholder="'回复'+ite.businessData.nickName"/>
                          <span class="spa" v-on:click="cldRep(item.id,ite.id,index)">
                         	       	     回复
                         	       </span>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>

              </li>
              <div class="hot-v" v-on:click="moreNews" v-show="isMoreNews" style="text-align: center;margin-top: 10px">
                <img src="../assets/img/Group 22.png" alt="">
              </div>
            </ul>
          </div>

        </div>
        <div class="content-r">
          <div>
            <div class="toutiao">
              <img src="../assets/img/Path 7.png" height="20px" alt="">
              <h4>头条资讯</h4>
            </div>
            <ul class=" top-lin">
              <li v-for="item in topLines">
                <router-link v-bind="{to:'/detailst/'+ item.id}">
                  <div class="zoomImage" :style="item.backImg"></div>
                  <h5>{{item.newsTitle}}</h5>
                  <p>{{item.newsAbstract}}</p>
                </router-link>
              </li>
            </ul>
          </div>
          <div class="ganhuo">
            <div>
              <img src="../assets/img/Path 7.png" height="20px" alt="">
              <h4>干货</h4>
            </div>
            <ul class="dried-food">
              <li v-for="item in driedStuff">
                 <router-link v-bind="{to:'/detailst/'+ item.id}">
                  <h5>{{item.newsTitle}}</h5>
                  <p>{{item.newsAbstract}}</p>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <message @click="isshows"></message>
    <messck v-show="isaccording"></messck>
    <floot></floot>
  </div>
</template>

<script>
  import navbar from '@/components/compon/navbar'
  import floot from '@/components/compon/floot'
  import message from '@/components/compon/message'
  import lunbo from '@/components/compon/lunbo'
  import messck from '@/components/compon/messck'

  export default {
    components: {
      message,
      floot,
      navbar,
      lunbo,
      messck
    },
    data () {
      return {
        tags: [],
        topLines: [],
        driedStuff: [],
        dialogVisible: false,
        news: [],
        ishow: false,
        show: true,
        ide: '',
        is: false,
        ides: false,
        isshow: false,
        asss: '',
        isaccording: false,
        repcomments: '',
        vs: true,
        src: require('../assets/img/love1.png'),
        isvs: false,
        imgs: true,
        commentslist: [],
        myseflis: [
          {name: '评论'}, {name: '赞'}, {name: '私信'}, {name: '系统消息'}
        ],
        isActive: true,
        num: null,
        asd: null,
        asf: null,
        currentPage: 1,
        isMoreNews: true,

      }
    },
    mounted () {
      this.getTags()
      this.getTopLine()
      this.getDriedStuffList()
      this.getNewsList('0', '')
    },
    methods: {
      getTags () {
        this.$fetch('/indexNews/getBcHotTagList').then(response => {
          let r = response.data
          this.tags = r.data

          if (this.tags.length != 0) {

          }
        })
      },
      getTopLine () {
        this.$fetch('/indexNews/getHeadlineNewsList').then(response => {
          let r = response.data
          for (var j = 0, len = r.data.length; j < len; j++) {
            r.data[j]['backImg'] = 'background-image:url(' + r.data[j].picUrl + ')'
          }
          this.topLines = r.data
        })
      },
      getDriedStuffList () {
        this.$fetch('/indexNews/getDriedStuffList').then(response => {
          let r = response.data
          this.driedStuff = r.data
        })
      },
      getNewsList (code, key) {
        this.currentPage = 1
        this.ide = code
        let params = {
          'condition':
            {
              'codes': code,
              'descLine': 'infopubldate',
              'descType': 'asc',
              'key': key
            },
          'current': this.currentPage,
          'pages': 0,
          'size': 10,
          'total': 0

        }
        this.$post('/indexNews/getNewsList', params).then(response => {
          this.news = response.data.data.records
          if (response.data.data.current < response.data.data.pages) {
            this.isMoreNews = true
          } else {
            this.isMoreNews = false

          }
        })
      },
      moreNews () {
        this.currentPage += 1
        let params = {
          'condition':
            {
              'codes': this.ide,
              'descLine': 'infopubldate',
              'descType': 'asc',
              'key': ''
            },
          'current': this.currentPage,
          'pages': 0,
          'size': 10,
          'total': 0

        }
        this.$post('/indexNews/getNewsList', params).then(response => {
          response.data.data.records.forEach(function (v) {this.news.push(v)}, this)
          if (response.data.data.current < response.data.data.pages) {
            this.isMoreNews = true
          } else {
            this.isMoreNews = false

          }
        })
      },
      getComments (item) {
        if (this.num == item.id) {
          this.num = null
        } else {
          this.num = item.id
          this.commentslist = []
          this.$fetch('/indexNews/getNewsCommentList?newsId=' + item.id + '&commentType=1').then(response => {
            if (response.data.code == 0 && response.data.data != null) {
              this.commentslist = response.data.data
            }

          })

        }
      },
      uploadComment (item) {
        let idst = item.id
        let params = {
          'newsId': idst,
          'content': this.asss,
          'parentId': 0,
          'commentType': 1,
          'newsType': 0
        }
        this.$post('/indexNews/addNewsComment', params).then(response => {
          if (response.data.code == 0) {
            this.num = null
            this.asss = ''
            this.getComments(item)
            item.comments += 1
          }
        })
      },
      cldRep (inde, iteid, index) {
        this.asd = null
        this.asf = index
        let ids = inde
        let ite = iteid
        let params = {
          'newsId': ids,
          'content': this.repcomments,
          'parentId': ite,
          'commentType': 1,
          'newsType': 0
        }
        this.$post('/indexNews/addNewsComment', params).then(response => {
          let r = response.data
          this.repcomments = ''
        })
      },
      cldComment (idex) {
        this.asd = idex
      },
      dorpDown () {
        if (this.show) {
          this.show = !this.show
          this.ishow = !this.ishow
          this.isActive = false
        }
      },
      packUp () {
        if (this.ishow) {
          this.show = !this.show
          this.ishow = !this.ishow
          this.isActive = true
        }
      },
      getMessagess (index) {
        this.ides = index
      },
//    点赞
      isPraise (item) {
        if (item.likeFlag != 1) {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 1,
            'type': 1
          }).then(response => {
            if (response.data.code == 0) {
              // document.querySelector('#like' + item.id).src = require('../assets/img/likes.png')
              item.src = require('../assets/img/likes.png')
              item.likeFlag = 1
              item.likes += 1
            }
          })
        } else {
          this.$post('/content/addContentLikesOrDislikes', {
            'id': item.id,
            'likeInd': 3,
            'type': 1
          }).then(response => {
            if (response.data.code == 0) {
              item.src = null
              item.likeFlag = 0
              item.likes -= 1
            }
          })
        }
      },
//       转发
      issForward (item) {
        let params = {
          'newsId': item.id,
        }
        this.$post('/indexNews/addNewsShares', params).then(response => {
          if (response.data.code == 0) {
            item.shares += 1
          }
        })
      },
      isshows () {
        this.isaccording = !this.isaccording
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  @import '../assets/css/pages/contents.css';

  .tagsHidden {
    max-height: 30px;
    overflow: hidden;
  }

  .zoomImage {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  }

  .messagess {
    width: 250px;
    height: 350px;
    box-shadow: 0 3px 5px 0;
    background-color: #ffffff;
    position: fixed;
    top: 16%;
    right: 55px;
    z-index: 99999;
    box-shadow: rgba(0, 0, 0, 0.20);
  }

  .messagess-one {
    height: 50px;
    line-height: 40px;
    border-bottom: 1px solid #4290CF;
  }

  .messagess-one a {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #999999;
    margin: 0 13px;
  }

  .lis p {
    max-height: 60px;
    overflow: hidden;
  }

  /*.lis p {*/
  /*position: relative;*/
  /*line-height: 1.4em;*/
  /*!* 3 times the line-height to show 3 lines *!*/
  /*height: 4.2em;*/
  /*overflow: hidden;*/
  /*}*/

  /*.lis p::after {*/
  /*content: "...";*/
  /*font-weight: bold;*/
  /*position: absolute;*/
  /*bottom: 0;*/
  /*right: 0;*/
  /*padding: 0 20px 1px 45px;*/
  /*background: url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;*/
  /*}*/

  .messagess-one .spanss {
    color: #4290CF;
    font-family: PingFangSC-Medium
  }

  .messaglists {
    padding: 10px;
  }

  .messagimg {
    width: 50px;
    height: 50px;
    border: 1px #4290CF solid;
    border-radius: 50%;
    float: left;
  }

  .messaglists-1 {
    overflow: hidden;
  }

  .messagname {
    margin-left: 62px;
    margin-top: 18px;
  }

  .messagname span {
    margin: 20px;
  }

  .messagname div {
    margin-bottom: 10px;
  }

  .main {
    position: relative;
  }

  .main .uscomments {
    width: 80%;
    padding-top: 10px;
    /*border-bottom: 1px #4290cf solid;*/
    margin: 0 auto 0px auto;

  }

  .uscomments .personal-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px #4290cf solid;
    margin: 5px;
    float: left;
  }

  .uscomments1 {
    overflow: hidden;
    border-bottom: 1px solid #919AA7;
    margin-bottom: 5px;
  }

  .uscomments-one {
    width: 88%;
    margin: 10px 0 8px 60px;
  }

  .uscomments-one div {
    float: right;
    margin-right: 10px;
  }

  .uscomments-one a {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 14px;
    color: #000000;
    margin: 10px;
  }

  .uscomments p {
    margin-left: 50px;
  }

  .main .comments-v {
    position: absolute;
    height: 50px;
    width: 100%;
    line-height: 50px;
    text-align: center;
    background-color: #eff8ff;
    margin-bottom: -25px;
  }

  .uscomments-no {
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background-color: #ffffff;
  }

  .replylis {
    width: 100%;
    background-color: greenyellow;
    margin-bottom: 10px;
  }

  .replylis input {
    width: 97%;
    height: 40px;
    border: 0;
    padding-left: 20px;
    line-height: 40px;
  }

  .replylis .spa {
    width: 60px;
    height: 24px;
    background-color: #4290cf;
    display: block;
    float: right;
    border-radius: 10px;
    text-align: center;
    line-height: 24px;
    color: #FFFFFF;
  }

  .rep {
    width: 90%;
    padding-left: 50px;
    background-color: #FFFFFF;
    font-size: 14px;
    margin-bottom: 20px;
    height: 40px;
    line-height: 40px;
  }

  .rep a {
    float: right;
  }
</style>
